<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
    <div>姓名：{{name}}</div>
    <div>班级：{{classRoom}}</div>
    <button onclick="hi()">打招呼</button>
    <button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vuejs-2.5.16.js"></script>
<script>
   let vm= new Vue({//创建Vue对象
        el:"#div",//根据选择器确定vue接管页面的范围
        data:{//数据区，在这里为接管区域的所有插值变量赋值
            name:"黄金标",//为name赋值
            classRoom:"安丘警备队"
        },
        methods:{//方法区，存放定义好的方法，方便接管区域直接调用
            study(){//定义学习的回调函数
                alert(this.name+"正在"+this.classRoom+"打麻将")
            }
        }
    });
   function hi() {//定义hi方法
       vm.study();//这个方法会触发Vue的study回调函数
   }
   function update() {//定义update这个单击事件触发的方法
       vm.classRoom="宪兵司令部";//通过对象.属性方式给classRoom重新赋值
   }
</script>
</html>